<template>
  <Card
    class="monitor1-card1-data"
    style="height:150px;width:100%;min-height:150px;background:#01237C;">
    <p slot="title" style="padding-left:30px;">
      事件统计
    </p>
    <!-- 财务室统计开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['safebox'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >

      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="8" >
            <span >保险柜打开次数</span>
          </i-col>
          <i-col :span="8">
            <span>钱箱打开次数</span>
          </i-col>
          <i-col :span="8">
            <span>违规次数占比(%)</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col
            ref="checkout"
            :span="8"
            v-cloak
            v-for="event in resTableData"
            :key="event.no"
          >
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 财务室统计结束-->
    <!-- 收银台开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['checkout'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >
      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="12">
            <span>当日累计服务次数</span>
          </i-col>
          <i-col :span="12">
            <span>违规次数占比(%)</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col
            ref="checkout"
            :span="12"
            v-cloak
            v-for="event in resTableData"
            :key="event.no"
          >
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 收银台结束-->
    <!-- 大门开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['gate'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >
      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="24">
            <span>今日累计进店人数</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col :span="24" v-for="event in resTableData" :key="event.no">
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 大门结束-->
    <!-- 加油站开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['refuel_side'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >
      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="12">
            <span>当日累计服务车辆</span>
          </i-col>
          <i-col :span="12">
            <span>当日平均服务时间</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col :span="12" v-for="event in resTableData" :key="event.no">
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 加油站结束-->
    <!-- 加油站全景开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['refuel_overview'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >
      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="12">
            <span>累计服务车辆</span>
          </i-col>
          <i-col :span="12">
            <span>违规次数占比(%)</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col :span="12" v-for="event in resTableData" :key="event.no">
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 加油站全景结束-->
    <!-- 卸油区开始-->
    <ul
      :class="{ 'ivu-statistic-hide': display_dic['unload'] }"
      style="text-align:center;padding: 10px 0px;list-style:none;color:#fff;font-size:2.0rem;"
    >
      <li>
        <Row style="width=100%" class="thick_bold">
          <i-col :span="24">
            <span>违规次数</span>
          </i-col>
        </Row>
      </li>
      <li>
        <Row style="width=100%" class="font_size_num thick_bold font_color_vio_rate">
          <i-col :span="24" v-for="event in resTableData" :key="event.no">
            <span>{{ event.data }}</span>
          </i-col>
        </Row>
      </li>
    </ul>
    <!-- 卸油区结束-->
  </Card>
</template>

<script>
export default {
  name: "myStatistics",
  props: {
    statisticsList: {
      type: Array
    }
  },
  computed: {
    resTableData: function() {
      // console.log("statisticsList:" + this.statisticsList);
      let category = this.statisticsList[0];
      //let atts = this.statisticsList[1]
      // console.log("category: " + category);
      let eventList = [];
      var index;

      for (index in this.statisticsList) {
        let tmp_dict = {}
        if (index != 0) {
          tmp_dict['no'] = index
          tmp_dict['data'] = this.statisticsList[index]
          eventList.push(tmp_dict);
        }
      }
      this.changeDisplay(category);
      // console.log("eventList" + eventList);
      return eventList;
    }
  },
  data() {
    return {
      //eventList:{"safebox":{}}
      //resTableData:[]
      //safebox_display: true,
      //checkout_display: true,
      display_dic: {
        safebox: true,
        checkout: true,
        gate: true,
        refuel_side: true,
        refuel_overview: true,
        unload: true
      }
    };
  },
  methods: {
    changeDisplay(category) {
      for (var key in this.display_dic) {
        if (key === category) {
          this.display_dic[key] = false;
        } else {
          this.display_dic[key] = true;
        }
      }
    }
  }
};
</script>

<style lang="less">
.monitor1-card1-data .ivu-card-bordered {
  border: 1px solid #0a4271 !important;
  border-color: #0a4271 !important;
}
.monitor1-card1-data .ivu-card-head {
  padding: 4px 15px !important;
  border-bottom: 1px solid #0b0f34 !important;
  /* background-color: #13a4c2 !important; */
  background-color: #0b0f34 !important;
  background-image: url("../../assets/title-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50px;
}
.monitor1-card1-data .ivu-card-head p {
  font-size: 2rem !important;
  height: 50px !important;
  line-height: 50px !important;
  // margin-top: 4px;
  color: #fff !important;
  text-align: left;
}
.monitor1-card1-data .ivu-card-body {
  padding: 0px !important;
}
.ivu-statistic-hide {
  display: none;
}
.ivu-statistic-show {
  display: block;
}
[v-cloak] {
  display: none !important;
}
.thick_bold {font-weight: bold}
.font_normal {font-weight: normal}
.font_size_num{font-size:30px;}
.font_size_percent{font-size: 2rem;}
.font_color_vio_rate{color:yellow}
</style>
